<!--
交易商分布的饼状图
-->
<template>
  <div :id="passkey" class="progress-pie-chart" />
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'PlatformPie',
  components: {

    // countTo
  },
  props: ['passkey', 'passName'],
  data() {
    return {
      startVal: 0
    }
  },
  mounted() {
    this.initPlacePie()
  },
  methods: {
    initPlacePie() {
      console.log(this.passkey, this.passName)
      const progressPieChart = echarts.init(document.getElementById(this.passkey))
      const progressOption = {
        title: {
          show: false,
          text: '完成度',
          x: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16
          }
        },
        animation: true,
        tooltip: {
          show: false
        },
        series: [
          {
            name: '完成度',
            type: 'pie',
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            silent: true,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 100,
                name: '完成度',
                selected: false,
                label: {
                  normal: {
                    show: true,
                    position: 'center',
                    fontSize: 20,
                    color: '#FFFFFF',
                    fontWeight: 500,
                    formatter: this.passName
                  }
                },
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#05C1FF' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#00FFFF' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              }
              // {
              //     value: 80,
              //     label: {
              //         normal: {
              //             show: false
              //         }
              //     },
              //     itemStyle: {
              //         color: '#eee'
              //     }
              // }
            ]
          },
          {
            name: '完成度',
            type: 'pie',
            startAngle: 170,
            radius: ['75%', '73%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            silent: true,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 95,
                name: '完成度',
                selected: false,
                label: {
                  normal: {
                    show: false,
                    position: 'center',
                    fontSize: 20,
                    formatter: '{b}\n{d}%'
                  }
                },
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#05C1FF' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#00FFFF' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              },
              {
                value: 5,
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  color: '#eee',
                  opacity: 0
                }
              }
            ]
          }
        ]
      }
      progressPieChart.setOption(progressOption)
    }
  }
}
</script>

<style lang="scss"  scoped>
.progress-pie-chart {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 100%;
  //margin: 0.05rem;
  position: relative;
}
</style>
